<template>
  <view>
    <!--#ifdef APP-PLUS-->
    <view class="lz-status_bar">
      <view class="lz-top_view"></view>
    </view>
    <!--#endif-->
	<view style="display: flex;flex-flow: row nowrap;align-items: center;width: 100%; padding: 30rpx;margin: auto;height: 220rpx;background-color: #ffffff;">
		<view > 
			<image :src="unitInfo.image" style="width: 70px;height: 91px;border-radius: 15rpx;box-shadow: 5rpx 5rpx 5rpx #e1e1e1;"></image>
		</view>
		<view style="display: flex;flex-flow: column wrap;margin-left: 20rpx;height: 80%;">
			<text style="font-weight: 900;">{{unitInfo.unit_name}}</text>
			<button class="tiku-list-head-btn">{{unitInfo.subject_name}}</button>
		</view>
	</view>
	
    <view class="kaoshi-tiku">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<block v-for="(item, index) in list"
               :key="index" 
			>
		<!-- 免费 -->
				<view class="kaoshi-tiku-content"
						v-if="item.price==0&&item.vipswitch==0"
						@tap="goto_detail(item,index)">
					<view class="pub-flex-1">
						<view class="kaoshi-tiku-content-flex">
							<view class="kaoshi-tiku-content-top">	
								<image class="kaoshi-tiku-content-image"src="../../../static/img/tikuicon.png"></image>
								{{item.name}}
							</view>
						</view>
						<view class="kaoshi-tiku-content-flex" style="color: #707070;">
							<view class="kaoshi-tiku-content-bottom">
								<view  style="display: flex;flex-direction: row;align-items: center;">
									<view style="width: 120rpx;">
										<u-line-progress :show-percent="false" 
										:round="false" height="8rpx" 
										:showText="false" 
										:percentage="item.jindu"
										activeColor="green">
										</u-line-progress>
									</view>
									<view class="pubgray">{{item.test_num}}/{{item.total_num}}题</view>
								</view>
									   
								<view v-if="item.scale>0">
									正确率：{{item.scale.toFixed(0)}}%
								</view>
								<view v-else>
									正确率：--
								</view>
										
								<view v-if="item.jindu>0" style="display: flex;flex-flow: row nowrap;color: orange;" @click.stop="gojl(item)">
									<u-icon name="file-text-fill" color="orange"></u-icon>
										记录
									</view>
									<view v-else style="display: flex;flex-flow: row nowrap;" @click.stop="nojl()" >
										<u-icon name="file-text-fill" color="#707070"></u-icon>
										记录
									</view>
								</view>
					  
							</view>
						</view>
					<view class="iconfont icon-arrow"></view>
				</view>
		
		
		
		
		
		<!-- 不免费 -->
				<view class="kaoshi-tiku-content"
						v-else-if="item.price==!0||item.vipswitch==!0"
						:style="{'color':(index>0)?'#9c9c9c':'#707070'}"
						@tap="goto_detail(item,index)">
					<view class="pub-flex-1">
						<view class="kaoshi-tiku-content-flex">
							<view class="kaoshi-tiku-content-top":style="{'color':(index>0)?'#9c9c9c':'#000'}" >
							<!-- 不免费 时  第一条免费  -->
								<image v-if="index==0" class="kaoshi-tiku-content-image"src="../../../static/img/tikuicon.png"></image>
								<image v-else-if="index==!0" class="kaoshi-tiku-content-image"src="../../../static/img/grayimg.jpg"></image>
								{{item.name}}
							</view>
						</view>
						<view class="kaoshi-tiku-content-flex">
						<view class="kaoshi-tiku-content-bottom">
							<view  style="display: flex;flex-direction: row;align-items: center;">
								<view style="width: 120rpx;">
									<u-line-progress :show-percent="false" 
									:round="false" height="8rpx" 
									:showText="false" 
									:percentage="item.jindu"
									activeColor="green">
									</u-line-progress>
								</view>
								<view class="pubgray">{{item.test_num}}/{{item.total_num}}题</view>
							</view>
								   
							<view v-if="item.scale>0">
								正确率：{{item.scale.toFixed(0)}}%
							</view>
							<view v-else>
								正确率：--
							</view>
							
							<view v-if="item.jindu>0" style="display: flex;flex-flow: row nowrap;color: orange;" @click.stop="gojl(item)">
								<u-icon name="file-text-fill" color="orange"></u-icon>
									记录
							</view>
							<view v-else style="display: flex;flex-flow: row nowrap;" >
								<u-icon v-if="index==0" name="file-text-fill" color="#707070"></u-icon>
								<u-icon v-if="index==!0" name="file-text-fill" color="darkgray"></u-icon>
								记录
							</view>
						</view>
					</view>
				</view>
				<view v-if="index==0" class="iconfont icon-arrow"></view>
				<view v-if="index==!0">
					<u-icon name="lock-fill" color="#9c9c9c"></u-icon>
				</view>
			</view>
		</block>
	</mescroll-body>
</view>
</view>
</template>

<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import { mapState } from "vuex";
import noRecode from "@/components/no-recode.vue";
import Error from '@/core/untils/error/index';

export default {
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
      // 下拉刷新的配置(可选, 绝大部分情况无需配置)
      downOption: {
        use: true, // 是否启用下拉刷新; 默认true
        auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
        native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
      },
      // 上拉加载的配置(可选, 绝大部分情况无需配置)
      upOption: {
        page: {
          num:0,
          size: 10 // 每页数据的数量,默认10
        },
        noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
        empty: {
          tip: '暂无相关数据'
        },
		
      },
      // 列表数据
      list:[],
	  unitInfo:{},
	practice_record: {},
      pages_params: {
        // dotype: '' 'zhangjie 章节', 'moni模拟', 'yicuo易错', 'cuoti错题', 'vip答题'
      },
      type: '',
      name: '',
      id: '',
      //通过step确定当前页面层次，用于后退时逐层退出
      step:0,
      arr:[],
	  percentage:'',
	  reFresh:'',
    };
  },
  //监听下一页的数据变化
  
  onLoad(opts) {
    this.pages_params = opts
    if(opts && opts.from_type){
      this.type = opts.from_type
      this.name = opts.name
      this.id = opts.id
    }
    this.arr[0] = 0;
  },
  onShow() {
    if(this.type != ''){
      // this.getList()
      this.arr[this.step]=(this.id)
    }
	console.log("show")
	//location.reload()
  },
  mounted() {},
  computed: {
    ...mapState(["subject", "userinfo"]),
  },
  components: {
  },
  onBackPress() {
//逐层退出
    if(this.step == 0){
      this.id=this.pages_params.id
      this.mescroll.resetUpScroll( false )
    }else{
      this.step -=1;
      this.id=this.arr[this.step]
      this.mescroll.resetUpScroll( false )
      return true;
    }
  },
  methods: {
    /*上拉加载的回调*/
    async upCallback(page) {
      let pageNum = page.num; // 页码, 默认从1开始
      let pageSize = page.size; // 页长, 默认每页10条
      let needLogin = false
      if (this.userinfo.token) {
        needLogin = true
      }

      let res = await this.$myHttp.post({
        url: this.$myHttp.urlMap.unitTwo,
        data: {
          subject_id: 0,
          unit_id:this.id,
          page: pageNum,
          limit: pageSize
        },
        needLogin: needLogin
      })
      if(res.code == 1){
        // 接口返回的当前页数据列表 (数组)
        let curPageData = res.data.unit_list;
        // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
        let curPageLen = curPageData.length;
        // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
        // let totalPage = data.xxx;
        // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
        let totalSize = res.data.total;
		this.unitInfo = res.data.unitInfo;
        this.mescroll.endBySize(curPageLen, totalSize);
        if(page.num == 1) this.list = []; //如果是第一页需手动置空列表
        this.list = this.list.concat(curPageData); //追加新数据
		console.log( JSON.stringify(this.list)+"THIS.IST")
      }else{
        this.mescroll.endErr()
      }
	  
      // 此处仍可以继续写其他接口请求...
      // 调用其他方法...
    },
	
    goto_detail(item,index) {
		console.log(item.total_num+"item.total_num")
		if (item.total_num == 0) { //如果目录下没有题目，提示用户
		    this.$myUtils.$prompt.showToast({
		        icon: 'none',
		        title: '当前目录下没有题目，请联系老师'
		    });
		    return
		}
		console.log(index+"item.index")
		if(index==0){
			  if(this.$myUserLogin.getToken()){
			    if(item.is_last == 0){
			      //非终极栏目，点击进入下级栏目
			      this.step +=1;
			      this.arr[this.step]=(item.id)
			      this.id = item.id
			      this.name = item.name
			      this.mescroll.resetUpScroll( false )
			    }else if(item.is_last == 1){
			      //终极栏目，点击进入答题页
			      this.$openrul('/pagesa/questionBank/questionBankAnswer/index?id=' + item.id + '&from_type=' + this.type + '&name=' + item.name)
			    }
			  }else{
			    Error.errorNotLoggedIn();
			  }
		}else if(item.vipswitch==0&&item.price==0){
			
			if(this.$myUserLogin.getToken()){
			  if(item.is_last == 0){
			    //非终极栏目，点击进入下级栏目
			    this.step +=1;
			    this.arr[this.step]=(item.id)
			    this.id = item.id
			    this.name = item.name
			    this.mescroll.resetUpScroll( false )
			  }else if(item.is_last == 1){
			    //终极栏目，点击进入答题页
			    this.$openrul('/pagesa/questionBank/questionBankAnswer/index?id=' + item.id + '&from_type=' + this.type + '&name=' + item.name)
			  }
			}else{
			  Error.errorNotLoggedIn();
			}
		}else if(item.vipswitch==0&&item.price==!0){
			var that=this
			uni.showModal({
				title: '付费课程',
				content:'糟糕您还没有题库卡，激活题库卡后可继续刷题', 
				cancelText:'稍后激活',
				confirmText:'立即激活',
				confirmColor:'#3c7bfc',
				cancelColor:'#acacac',
				success: function (res) {
					if (res.confirm) {
						//that.$openrul('/pagesa/my/money/money')
						 that.$openrul('/pagesa/my/money/money?id='+item.id+'&image='+item.image+'&exam_name='+that.unitInfo.unit_name+'&price='+item.price+'&type_text='+that.unitInfo.subject_name)
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			}); 
		}else if(item.vipswitch!=0&&item.price==0){
			var that=this
			uni.showModal({
				title: '会员专享',
				content:'糟糕您还没有激活，激活后可继续刷题', 
				cancelText:'稍后激活',
				confirmText:'立即激活',
				confirmColor:'#3c7bfc',
				cancelColor:'#acacac',
				success: function (res) {
					if (res.confirm) {
						 that.$openrul('/pagesa/my/vip/index')
						
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			}); 
		} 

   
     },
	gojl(item){
		var scale = this.list.scale
		this.$openrul('/pagesa/questionBank/questionOver/index?id=' + item.id + '&from_type=' + this.type + '&name=' + item.name+'&scale='+item.scale)
	},
	nojl(){
		uni.showToast({
			title: '您还没有记录，快去刷题吧',
			icon: 'none'
		})
	}
	
	
  },
  
};
</script>

<style>
page {
  background: #ffffff;
}
/*题库列表*/
.kaoshi-tiku {
  background-color: #f3f4f5;
  border-radius: 20rpx;
}

.kaoshi-tiku-content {
  width: 85%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 16px;
  padding: 14px ;
  border-bottom: solid 1px #f5f5f5;
  background-color: #ffffff;
  border-radius: 10rpx;
  margin-top: 30rpx;
}
.kaoshi-tiku-content-flex {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kaoshi-tiku-content .icon-arrow {
  padding-left: 13px;
  color: #b3b3b3;
  font-size: 12px;
}
.kaoshi-tiku-content .kaoshi-tiku-content-flex:first-child {
  padding-bottom: 6px;
}
.kaoshi-tiku-content .kaoshi-tiku-content-flex:last-child {
  font-size: 14px;
}
.kaoshi-tiku-content-top {
      display: flex;
      align-items: center;
      font-size: 25rpx;
      font-weight: 500;
}
.kaoshi-tiku-content-image{
	width: 20px;
	height: 20px;
	margin-right: 15rpx;
	margin-top: 2px;
	border-radius: 10rpx;
}
.kaoshi-tiku-content-top img {
  width: 20px;
  height: 22px;
  margin-right: 10px;
}
.kaoshi-tiku-content-bottom {
  display: flex;
  align-items: center;
  width: 90%;
  justify-content: space-around;
  font-size: 20rpx;
  
  margin-left: 30rpx;
}
.kaoshi-tiku-content-flex .icon-dui2 {
  margin: 2px 2px 0 0;
  color: #3c7bfc;
}


.kaoshi-head-banner {
        background: #fff;
        border-radius: 5px;
        width: 92%;
        margin: 10px auto;
        /* box-shadow: 0 0 10px rgba(208, 208, 208, 0.5); */
        /* margin-bottom: 18px; */
        padding: 16px 0 18px 0;
    }
	.kaoshi-user-top-remind-b {
	    display: flex;
	    justify-content: center;
	    text-align: center;
	    font-size: 14px;
	    color: #c5c5c5;
	}
	
	.kaoshi-user-top-remind-b-view {
	    flex: 1;
	}
	.kaoshi-user-top-remind-b-title {
	    font-size: 18px;
	    color: #000;
	    padding: 4px 0 6px 0;
	}
	
	
	.kaoshi-user-top-remind-b-title-p{
	  font-size: 15px;
	}
	/* #ifdef MP-WEIXIN */
	.kaoshi-xcx {
	    background: #fddddd;
	    padding: 8px 0;
	}
	/* #endif */
	.kaoshi-user-top-remind-b-title-content {
	    display: flex;
	    align-items: baseline;
	    justify-content: center;
	}
	.tiku-list-head-btn{
			width: 90rpx;
		    height: 35rpx;
		    line-height: 40rpx;
		    font-size: 20rpx;
		    color: #9c9c9c;
		    border-radius: 20rpx;
		    background-color: #efefef;
		    padding: 0px;
		    margin-top: 20rpx;
		    margin-left: -5rpx;
			
			
	}
	button::after{
		border:none;
	}
	.pubgray{
		margin-left: 10rpx;
		
	}
</style>
